<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" :inline="true" width="160px" v-show="showSearch" label-width="78px">
			<el-form-item label="项目名称" prop="projectId">
				<el-select style="width:160px" v-model="queryParams.projectId" clearable placeholder="请选择项目名称">
					<el-option v-for="item in projectIdOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="项目名称" prop="projectId">
				<treeselect style="width:160px" v-model="queryParams.deptId" :options="deptOptions" :disable-branch-nodes="true" :show-count="true" placeholder="请选择归属部门" />
			</el-form-item>

			<el-form-item label="用户名称" prop="userName">
				<el-input style="width:160px" v-model="queryParams.userName" placeholder="请输入用户名称" clearable size="small" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<div v-loading="loading">
			<template v-for="item in personList">
				<Person :user="item" @checkIn="setProjectId" @checkOut="checkOut" @showDetails="showDetails"></Person>
			</template>
		</div>
		<el-dialog title="个人详情" :visible.sync="userVisible" width="950px" append-to-body>
			<userDetails v-if="userVisible" :userId="userId" />
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click="userVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog title="选择项目" :visible.sync="projectVisible" width="400px" append-to-body>
			<el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="项目名称" prop="projectId">
					<el-select style="width:160px" v-model="form.projectId" clearable placeholder="请选择项目名称">
						<el-option v-for="item in projectIdOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="cyan" size="mini" @click="checkInValidate">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import { listPersonTrain, getPersonTrain, delPersonTrain, addPersonTrain, updatePersonTrain } from "@/api/business/personTrain";
	import { listProject } from "@/api/business/project";
	import { getUserAttendanceList } from "@/api/system/user";
	import { userCheckIn, userCheckOut } from "@/api/system/attendanceRecord";
	import Person from "@/components/Business/Person";
	import userDetails from "./userDetails";
	import { treeselect } from "@/api/system/dept";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	export default {
		name: "PersonArchives",
		components: {
			Person,
			userDetails,
			Treeselect
		},
		data() {
			return {
				loading: true, // 遮罩层
				ids: [], // 选中数组
				single: true, // 非单个禁用
				multiple: true, // 非多个禁用
				showSearch: true, // 显示搜索条件
				personTrainList: [], // 人员培训表格数据
				title: "", // 弹出层标题
				userVisible: false, // 是否显示弹出层
				projectVisible: false,
				projectIdOptions: [], // 项目名称下拉框

				queryParams: { // 查询参数
					projectId: null,
					userName: null
				},
				form: {
					'projectId': ''
				}, // 表单参数
				rules: {
					projectId: [{
						required: true,
						message: "项目名称不能为空",
						trigger: "blur"
					}],
				}, // 表单校验
				personList: [], //用户list
				userId: '', //用户id
				projectId: '', //项目id
				deptOptions: [],
			};
		},
		created() {
			this.getUserAttendanceList();
			listProject({
				pageNum: 1,
				pageSize: 1000
			}).then(response => {
				this.projectIdOptions = response.rows;
			});
			/** 查询部门下拉树结构 */
			treeselect().then(response => {
				this.deptOptions = response.data;
			});
		},
		methods: {
			/** 查询人员培训列表 */
			getUserAttendanceList() {
				this.loading = true
				getUserAttendanceList(this.queryParams).then(response => {
					this.personList = response.data;
					this.loading = false
				});
			},
			setProjectId(userId) {
				this.userId = userId
				this.form.projectId = ''
				this.projectVisible = true
				this.resetForm("form");
			},
			checkInValidate() {
				this.$refs['form'].validate((valid) => {
					if(valid) {
						this.checkIn();
					} else {
						return false;
					}
				});
			},
			checkIn() {
				userCheckIn(this.userId, this.form.projectId).then(response => {
					this.projectVisible = false
					this.getUserAttendanceList();
				});
			},
			checkOut(userId) {
				userCheckOut(userId).then(response => {
					this.getUserAttendanceList();
				});
			},
			showDetails(userId) {
				this.userId = userId
				this.userVisible = true
			},
			/** 搜索按钮操作 */
			handleQuery() {
				setTimeout(() => {
					this.queryParams.pageNum = 1;
					this.getUserAttendanceList();
				}, 100)
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加人员培训";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids
				getPersonTrain(id).then(response => {
					this.form = response.data;
					this.open = true;
					this.title = "修改人员培训";
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate(valid => {
					if(valid) {
						if(this.form.id != null) {
							updatePersonTrain(this.form).then(response => {
								if(response.code === 200) {
									this.msgSuccess("修改成功");
									this.open = false;
									this.getList();
								}
							});
						} else {
							addPersonTrain(this.form).then(response => {
								if(response.code === 200) {
									this.msgSuccess("新增成功");
									this.open = false;
									this.getList();
								}
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$confirm('是否确认删除人员培训编号为"' + ids + '"的数据项?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					return delPersonTrain(ids);
				}).then(() => {
					this.getList();
					this.msgSuccess("删除成功");
				}).catch(function() {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('business/personTrain/export', {
					...this.queryParams
				}, `人员培训.xlsx`)
			}
		}
	};
</script>